<template>
    <div class="info_ul">
        <div class="info_li" v-for="(item, index) in userInfo" :key="index">
            <div class="label">{{ item.label }}：</div>
            <div class="val">{{ item.val}}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getUserDetail } from '@/api/SystemSet/UserManage'
import { onMounted, reactive, ref } from 'vue';

const props = defineProps({
    lookItem: {}
})

onMounted(() => {
    if (props.lookItem) {
        getLookInfo()
    }
})

let userInfo = ref([{ label: '用户名', val: '' },
{ label: '姓名', val: '' },
{ label: '部门', val: '' },
{ label: '手机号', val: '' },
{ label: '性别', val: '' },
{ label: '岗位', val: '' },
{ label: '角色', val: '' },])

const getLookInfo = () => {
    getUserDetail(props.lookItem).then((res: any) => {
        userInfo.value = [
            { label: '用户名', val: res.data.userName },
            { label: '姓名', val: res.data.realName },
            { label: '部门', val: res.data.orgName },
            { label: '手机号', val: res.data.mobile },
            { label: '性别', val: res.data.gender === 1 ? '女' : '男' },
            { label: '岗位', val: res.data.post },
            { label: '角色', val: res.data.roleNameList.join(',') },
        ]
    })
}

</script>

<style lang="less" scoped>
.info_ul {
    display: flex;
    flex-wrap: wrap;

    .info_li {
        flex: 0 0 300px;
        display: flex;
        padding-bottom: 20px;

        .label {
            width: 80px;
            text-align: right;
            color: #999;
        }

        .val {
            width: 220px;
            color: #333;
        }
    }
}
</style>